{% extends "./layout/layout.html" %}
{% block page_content %}
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">注册</div>
        <div class="panel-body">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" class="form-control" placeholder="用户名"/>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" class="form-control" placeholder="密码"/>
          </div>
          <div class="form-group">
            <label for="department">部门</label>
            <select name="departmentId" id="departmentId" class="form-control">
              <option value="">请选择部门</option>
              {% for item in departments %}
                <option value="{{item.id}}">{{item.name}}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <button id="register_btn" class="btn btn-sm btn-primary">注册</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3"></div>
  </div>
{% endblock %}
{% block page_js %}
  <script>
    $(function() {
      $("#register_btn").click(function() {
        var username = $("#username").val();
        var password = $("#password").val();
        var departmentId = $("#departmentId").val();
        if (username.length === 0) {
          alert('请输入用户名');
          return;
        }
        if (password.length === 0) {
          alert('请输入密码');
          return;
        }
        $.post('/register', {
          username: username,
          password: password,
          departmentId: departmentId,
        }, function(data) {
          if (data.code === 200) {
            localStorage.setItem('token', data.detail.token);
            window.location.href = '/';
          } else {
            alert(data.description);
          }
        })
      })
    })
  </script>
{% endblock %}